<template>
  <section class="component repayment-confirmation-detail">
    <el-form :model="model" :rules="rules" label-width="110px" ref="data">
      <el-row>
        <el-col :span="12">
          <el-form-item label="订单编号：">{{rowData.caseNumber}}</el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="委托方：">{{rowData.principalName}}</el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="催收机构：">{{rowData.deptName}}</el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="催收员：">{{rowData.collectorRealName}}</el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="申请时间：">{{rowData.createTime | dateTimeFormat}}</el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="回款日期：">{{rowData.entryTime | dateFormat}}</el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="回款金额：">{{rowData.repayAmount}}</el-form-item>
      <el-row>
        <el-col :span="12">
          <el-form-item label="回款账户：">{{rowData.repaymentAcctname}}</el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="回款账号：">{{rowData.repaymentAcctno}}</el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="收款账户：">{{rowData.receiveAcctname}}</el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="收款账号：">{{rowData.receiveAcctno}}</el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="备注：">
        {{rowData.remark}}
      </el-form-item>
      <el-form-item label="附件图片：">
        <ul>
          <li v-for="item in fileList" :key="item.uid">
            <el-image 
              :src="item.url" 
              :preview-src-list="srcList">
            </el-image>
          </li>
        </ul>
      </el-form-item>
      <template v-if="rowData.confirmState === 'WAIT_CONFIRM'">
        <el-form-item label="确认状态：" prop="confirmState">
          <el-select v-model="model.confirmState" clearable>
            <el-option v-for="{index,name,code} in $dict.getDictData('RepaymentConfirmState').filter(v => v.code !== 'WAIT_CONFIRM')" :key="index" :label="name" :value="code.replace(/M|\+/, '')"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="确认备注：" prop="confirmRemark">
          <el-input type="textarea" v-model="model.confirmRemark" style="width:93%" :maxlength="300" show-word-limit></el-input>
        </el-form-item>
      </template>
      <template v-else>
        <el-form-item label="确认状态：">{{rowData.confirmState | dictConvert('RepaymentConfirmState')}}</el-form-item>
        <el-form-item label="确认备注：">{{rowData.confirmRemark}}</el-form-item>
        <el-row>
          <el-col :span="12">
            <el-form-item label="确认人员：">{{rowData.manualConfirmRealName}}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="确认时间：">{{rowData.manualConfirmDate | dateTimeFormat}}</el-form-item>
          </el-col>
        </el-row>
      </template>

    </el-form>

    <div class="operate-buttons" v-if="rowData.confirmState === 'WAIT_CONFIRM'">
      <el-button @click="emitClose">取消</el-button>
      <el-button @click="submit" :loading="submitLoading">确定</el-button>
    </div>
    <div class="operate-buttons" v-else>
      <el-button @click="emitClose">关闭</el-button>
    </div>
  </section>
</template>
<script lang="ts">
import { Vue, Component, Prop, Emit } from 'vue-property-decorator'
import { FileUploadService } from "~/services/file-service/file-upload.service";
import { Dependencies } from "~/core/decorator";
import { CaseRepaymentService } from '~/services/domain-service/case-repayment.service'

@Component({
  components: {}
})
export default class RepaymentConfirmationDetail extends Vue {
  @Dependencies(FileUploadService) private fileUploadService: FileUploadService
  @Dependencies(CaseRepaymentService)
  private caseRepaymentService: CaseRepaymentService;
  @Prop() private rowData

  private model: any = {
    confirmState: '',
    confirmRemark: '',
    id: ''
  }
  private fileList: any = []
  private srcList: string[] = []
  private rules: any = {
    confirmState: { required: true, message: '请选择确认状态！' }
  }
  private submitLoading: boolean = false

  @Emit('close') private emitClose() {
    const form: any = this.$refs['data']
    form.resetFields()
  }
  @Emit('refreshList') private emitRefreshList() { }

  private submit() {
    const from: any = this.$refs['data']
    from.validate((valid) => {
      if (!valid) return
      this.submitLoading = true
      this.model.id = this.rowData.id
      this.caseRepaymentService.confirmCaseRepaymentApply(this.model).subscribe(data => {
        this.submitLoading = false
        this.$message.success('操作成功！')
        this.emitClose()
        this.emitRefreshList()
      }, error => { this.submitLoading = false })
    })
  }

  private imageFileList() {
    if (!this.rowData.imageUrl) return
    this.fileUploadService.getAllUploadFileByIds(this.rowData.imageUrl).subscribe(data => {
      this.fileList = data;
      this.fileList.forEach(item =>{
        this.srcList.push(item.url)
      })
    })
  }
}
</script>
<style lang="less">
.component.repayment-confirmation-detail {
  max-height: 500px;
  overflow-y: auto;
  ul {
    // max-height: 100px;
    // overflow-y: auto;
    padding: 0;
    li {
      list-style: none;
      margin-right: 10px;
      margin-bottom: 10px;
      width:80px;
      height:80px;
      float: left;
      .el-image{
        height:80px;
      }
      img {
        border-radius: 5px;
        border: 0;
        cursor: pointer;
      }
    }
  }
}
</style>